import {  history, useModel } from '@umijs/max';
import styles from './index.less';
import { Layout, Menu } from 'antd';
import { useLazyList, useTable } from '@/hooks/index';
import InfiniteList from '@/components/InfiniteList';
import { searchArticle } from '@/services/article';
import useSearchParams from '@/hooks/useSearchParams';
import { useEffect, useMemo } from 'react';
import { useRequest } from 'ahooks';
import { getArticleType } from '@/services/commonServices';
const { Sider } = Layout;

export default () => {

  const {type=''} = useSearchParams();
  const { menuShow } = useModel('global');
  const { list, nextPage, loading, pageParams,refreshPage } = useLazyList({ api: searchArticle, extraParams: { value:type??''},manual:true,fieldParams:{
    pageSize:'size',
    pageCurrent:'current',
    totalCount:'totalCount',
}})
const {data:articleType}=  useRequest(getArticleType)
const menuItems = useMemo(()=>{
  const arr = articleType?.map?.((item)=>{
    return {
      label:item.name,
      key:item.name,
    }
  })||[]
  return [
    {
      label: `全部`,
      key: '',
    },
    ...arr
  ]
},[articleType])
useEffect(()=>{
  refreshPage()
},[type])

  return <div className={styles.container}>
    <Sider width={164} className={styles.leftSider} style={{ top: menuShow ? '80px' : '' }}>
        <Menu
          className={styles.menu}
          mode="inline"
          selectedKeys={[type]}
          onSelect={(e) => {
            history.push('/home?type='+e.key);
          }}
          items={menuItems}
        />
      </Sider>

    <div className={styles.contentContainer}  >
      <div className={styles.list}>
        <InfiniteList
          dataSource={list}
          next={() => {
            nextPage()
          }}
          loading={loading}
          hasMore={list.length < pageParams.totalCount}
          renderItem={(item, index) => {
            return <div key={index} className={styles.item} onClick={()=>{
              window.open(`/view/${item.id}`)
            }}>
              <div className={styles.left}>
                <div className={styles.title}>{item.title}</div>
                <div className={styles.desc}>{item.summary}</div>
                <div className={styles.otherContainer}>
                  <div className={styles.metaContainer}>
                    <span className={styles.userName}>{item.nickname}</span>
                    <span className={styles.numberInfo} ><i className='iconfont icon-browse' />{item.views||0}</span>
                    <span className={styles.numberInfo} ><i className='iconfont icon-a-Property1youbangzhuProperty2weixuanzhong' />{item.likes||0}</span>
                  </div>
                  <div className={styles.tagContainer}>

                  </div>
                </div>
              </div>
              {
                item.images&&<img className={styles.image} src={item.images} alt="" />
              }
            </div>
          }}
        />
      </div>
    </div>
  </div>;
};
